<template>
    <div class="shopping-cart">
        <h1>Shopping Cart</h1>

        <!-- 商品列表 -->
        <div class="product-list">
            <div class="product" v-for="i in item" :key="i.name">
                <img src="https://via.placeholder.com/100" alt="Product Image">
                <div class="product-details">
                    <h2>{{ i.name }}</h2>
                    <p>${{ i.value }}</p>
                    <div class="quantity">
                        <button @click="i.num--" :class="[{ button2: !i.num }]">-</button>
                        <input type="text" v-model="i.num">
                        <button @click="i.num++" :class="[{ button2: i.num >= 10 }]">+</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 购物车总结 -->
        <div class="cart-summary">
            <h3>Cart Summary</h3>
            <p>Total Items: <span>{{ sumnum }}</span></p>
            <p>Total Price: <span>${{ sumvalue }}</span></p>
            <button class="checkout-btn" @click="jiezhang">Checkout</button>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { computed, reactive, ref, watch } from 'vue';


const sumone = ref(0)
const sumtwo = ref(0)
const sumt = ref(0)



const item = reactive([{
    name: 'Product 1',
    value: 100,
    num: sumone
},
{
    name: 'Product 2',
    value: 50,
    num: sumtwo
}])

const sumnum = computed(() => {
    let sum = 0
    for (const e of item) {
        sum += e.num
    }
    return sum
})
const sumvalue = computed(() => {
    let sum = 0
    for (const e of item) {
        sum += e.num * e.value
    }
    return sum

})

watch(item, () => {
    for (const e of item) {
        if (e.num < 0) {
            alert('商品数量不能小于0')
            e.num = 0
        }
        if (e.num > 10) {
            alert('商品数量不能大于10'
            )
            e.num = 10
        }
    }
})


const jiezhang = () => {
    alert(`商品数量为${sumnum.value},商品价格为${sumvalue.value}`)
}

</script>

<style>
/* 主体购物车样式 */
.shopping-cart {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
}

/* 商品列表 */
.product-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.product img {
    width: 100px;
    height: 100px;
    margin-right: 20px;
}

.product-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-details h2 {
    margin: 0;
}

.product-details p {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

/* 数量调节按钮 */
.quantity {
    display: flex;
    align-items: center;
}

.quantity button {
    padding: 5px 10px;
    margin: 0 5px;
    background-color: #4caf50;
    color: white;
    border: none;
    cursor: pointer;
}

.button2 {
    display: none;
}

.quantity button:hover {
    background-color: #45a049;
}

.quantity input {
    width: 40px;
    text-align: center;
}

/* 购物车总结 */
.cart-summary {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #ccc;
    text-align: right;
}

.cart-summary h3 {
    margin-bottom: 10px;
}

.cart-summary p {
    font-size: 1.2em;
    margin: 5px 0;
}

.checkout-btn {
    padding: 10px 20px;
    background-color: #2196f3;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1em;
}

.checkout-btn:hover {
    background-color: #0b7dda;
}
</style>